<template>
  <swiper class="swiper"
          :options="swiperOption">
    <swiper-slide v-for="(item, index) in banners"
                  :key="index">
      <div class="top_banner_item"
           @click="goto(item.href)">
        <img :src="item.image"
             alt="">
      </div>
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-bullets"
         slot="pagination"
         v-if="banners.length > 1"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import axios from 'axios'
export default {
  name: 'swiper-example-pagination',
  title: 'Pagination',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOption: {
        spaceBetween: 15,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet (index, className) {
            return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
          }
        },
      },
      banners: [
      ]
    }
  },
  async mounted () {
    await this.getBanners()
  },
  methods: {
    getBanners () {
      return new Promise(async resolve => {
        await axios.get('http://talkapi.dei2.com/inig/plugin/getBanners').then(res => {
          this.banners = res.data?.data?.list || []
          resolve(true)
        }).catch(err => {
          resolve(true)
        })
      })
    },
    goto (href) {
      bbtools.shell.openExternal(href)
    }
  }
}
</script>

<style lang="less" scoped>
.top_banner {
  &_item {
    width: 100%;
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.swiper {
  .swiper-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    box-sizing: border-box;
  }
  /deep/ .swiper-pagination-bullet-custom {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    font-size: 12px;
    opacity: 0.7;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;

    &:hover {
      opacity: 1;
    }

    &.swiper-pagination-bullet-active {
      opacity: 1;
      color: #fff;
      background: #007aff;
    }
  }
}
</style>